<template>
  <el-footer class="footer" height="auto">
    <div class="footer-left">
      <!-- <p><IconFont name="icon-newlogo" type="class" class="logo"/></p> -->
      <p>共筑EOS繁荣生态</p>
      <p>© 2017 dage Technology Limited 版权所有</p>
    </div>
    <div class="footer-right">
      <div class="footer-link-page">
        <h5>关于</h5>
        <div>
          <p>
            <router-link to="/">
              使用规则
            </router-link>
          </p>
          <p>
            <router-link to="/">
              关于我们
            </router-link>
          </p>
          <p>
            <router-link to="/">
              积分规则
            </router-link>
          </p>
        </div>
      </div>
      <div class="footer-link-page">
        <h5>法律</h5>
        <div>
          <p>
            <router-link to="/">
              隐私条款
            </router-link>
          </p>
          <p>
            <router-link to="/">
              用户协议
            </router-link>
          </p>
          <p>
            <router-link to="/">
              法律声明
            </router-link>
          </p>
          <p>
            <router-link to="/">
              APP下载
            </router-link>
          </p>
        </div>
      </div>
      <div class="footer-contact">
        <h5>联系我们</h5>
        <p>support@dage.pro</p>
        <p>
          <IconFont name="icon-tuite" type="class" class="logo"/>
          <IconFont name="icon-weibo" type="class" class="logo"/>
          <IconFont name="icon-facebook1" type="class" class="logo"/>
          <IconFont name="icon-telegram1" type="class" class="logo"/>
        </p>
      </div>
    </div>
  </el-footer>
</template>
<script>
import IconFont from '@/components/Iconfont/Iconfont'
export default {
  name: 'Footer',
  components: { IconFont },
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  .footer
    height auto
    background-color #232838
    color #C5CDDE
    a
      color #C5CDDE
  .footer-link-page
    margin-right 2rem
  .footer-link-page
  .footer-contact
  .footer-left
    line-height 2.5rem
  .footer-link-page h5
  .footer-contact
  .footer-left
    text-align left
  .footer-link-page div
    width 11.66667rem
    // max-width 11rem
    text-align left
    // display flex
    p
      display inline-block
      margin-right 1rem
  .footer-contact
    p
      i
        margin-right (15/12)rem
        &:hover
          color #6971F4
          cursor pointer
  @media screen and (max-width: 549px)
    .footer-right
      >div
        margin-top (10/12)rem
  @media screen and (max-width: 980px) and (min-width: 550px)
    .footer-right
      display flex
      margin-top (10/12)rem
      >div
        width 33.333%
  @media screen and (min-width: 981px)
    .footer
    .footer-right
      display flex
    .footer-right
      flex 1
      justify-content flex-end
</style>
